<template>
  <div :class="className" :id="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from "echarts";

require("echarts/theme/macarons"); // echarts theme


export default {
  props: {
    className: {
      type: String,
      default: "chartmainbar"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "650px"
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    legendShow:{
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    },
    str: {
      type: String,
      default: ""
    },
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.initChart();
      }, 100);
      
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      var chartDom3 = document.getElementById(this.className);
      this.chart = echarts.init(chartDom3);
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData,data,color} = {}) {
      this.chart.setOption({
        xAxis: {
          // max: 'dataMax',

        },
        yAxis: {
          type: 'category',
          data: data,
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 9, // only the largest 3 bars will be displayed
          axisLabel:{
            textStyle: {
              color: '#7C8CA5',
            },
            interval: 0,
            formatter:function(value)
            {
              var ret = "";//拼接加\n返回的类目项
              var maxLength = 6;//每项显示文字个数
              var valLength = value.length;//X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              if (rowN > 1)//如果类目项的文字大于3,
              {
                for (var i = 0; i < rowN; i++) {
                  var temp = "";//每次截取的字符串
                  var start = i * maxLength;//开始截取的位置
                  var end = start + maxLength;//结束截取的位置
                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + "\n";
                  ret += temp; //凭借最终的字符串
                }
                return ret;
              }
              else {
                return value;
              }
            }
          },
          axisLine: {
            show:false,
            textStyle: {
              color: '#7C8CA5'
            }
          },
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 10,
          top: 10,
          containLabel: true,
          width:'90%',
        },
        series: [{
          realtimeSort: true,
          name: 'X',
          type: 'bar',
          barWidth: "32%",
          data: expectedData,
            label: {
            show: true,
            position: 'right',
            valueAnimation: true,
              formatter: '{c}'+this.str,//c后面加单位
              textStyle:{
          color:"#7c8ca5",
          },
          },
          itemStyle:{
            normal:{
              color:color,
              barBorderRadius: [0, 20, 20, 0]
            }
          },
        }],
        legend: {
          show: false
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      });
    }
  }
};
</script>
